<template>
  <!-- 订单投诉页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_">投诉</view>
      <view class="right_"></view>
    </view>
    <view class="xian_"></view>
    <view class="area">
      <view class="one_">
        <view class="title_"> 举报卖家 </view>
        <view class="cont">
          <view class="left_">
            <image :src="orderDetail.businessUrl" mode="aspectFill"></image>
          </view>
          <view class="right_">
            <view class="name"> {{ orderDetail.businessName }} </view>
            <view class="comm"> {{ orderDetail.businessCompany }} </view>
          </view>
        </view>
      </view>
      <view class="two_">
        <view class="title_"> 举报订单 </view>
        <view class="comm">
          <view class="top_"> 订单编号：{{ orderDetail.orderCode }} </view>
          <view class="bottom_">
            <view class="left_">
              <image :src="orderDetail.goodsImg" mode="aspectFill"></image>
            </view>
            <view class="right_">
              <view class="top">
                {{ orderDetail.goodsName }}
              </view>
              <view class="bottom">
                ¥{{ orderDetail.presentPrice }}
                <text>x{{ orderDetail.nums }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="three_">
        <view class="title_"> 举报理由 </view>
        <textarea
          value=""
          placeholder="请输入您所遇到的问题，我们会在第一时间处理。"
          maxlength="2000"
          v-model="content"
        />
      </view>
      <view class="four_">
        <view class="title_"> 举报图片（选填） </view>
        <view class="imgs_">
          <view class="img_item" v-for="(item, i) in imgs" :key="i">
            <image :src="item" mode="aspectFill" @tap="imgsDa(i)"></image>
            <image
              src="../../imges/tousu_goods.png"
              mode="aspectFill"
              class="tousu"
              @tap="imgsShan(i)"
            ></image>
          </view>
          <image
            class="img_item"
            src="../../imges/join_tupian.png"
            mode="aspectFill"
            @tap="selctPhone"
            v-if="imgs.length < 5"
          ></image>
        </view>
      </view>
      <view class="five_">
        <view class="title_"> 联系方式 </view>
        <view class="content">
          <view class="name_">
            <input type="text" value="" v-model="name" placeholder="姓名" />
          </view>
          <view class="phone_">
            <input type="text" value="" v-model="phone" placeholder="手机" />
          </view>
        </view>
      </view>
      <view class="footer_btn" @tap="handleBao"> 提交 </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      content: "", //举报内容
      name: "",
      phone: "",
      imgs: [],
      hou_imgs: [],
      upToken: "",
      qiniuyun: "",
      qiniuUrl: "",
      orderId: "",
      businessUid: "",
      orderDetail: {},
    };
  },
  onLoad(options) {
    if (options.id) {
      this.orderId = options.id;
      this.businessUid = options.businessUid;
    }
    let personal = uni.getStorageSync("personal");
    if (personal) {
      this.name = personal.realName;
      this.phone = personal.telephone;
    }
    this.handleDetail();
    request({
      //上传图片
      url: "h5/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": this.globalData.apiVersion,
        "Source-Type": 7,
      },
      data: {},
    }).then((res) => {
      this.upToken = res.data.data.upToken;
      this.qiniuyun = res.data.data.qiniuDomain;
      this.qiniuUrl = res.data.data.region;
    });
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    handleBao() {
      if (this.content == "") {
        uni.showToast({
          title: "请填写投诉理由",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.name == "") {
        uni.showToast({
          title: "请填写姓名",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.phone == "") {
        uni.showToast({
          title: "请填写联系方式",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      let phoneH = /^(((1[0-9][0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (!phoneH.test(this.phone)) {
        uni.showToast({
          title: "请输入合法手机号",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/goods/saveOrderReport",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            reportId: this.businessUid,
            goodsOrderId: this.orderId,
            reportReason: this.content,
            giveExampleFile: this.hou_imgs.join(";"),
            linkPhone: this.phone,
            linkName: this.name,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            uni.showToast({
              title: "投诉成功",
              duration: 1500,
              icon: "none",
            });

            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleDetail() {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/goodsOrder/goodsInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: this.orderId,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.orderDetail = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    selctPhone() {
      //点击上传图片
      let that = this;
      uni.chooseImage({
        count: 5,
        success: (res) => {
          let tempFilePaths = res.tempFilePaths;
          this.imgs = [...this.imgs, ...res.tempFilePaths];
          if (this.imgs.length >= 5) {
            this.imgs.length = 5;
          }
          tempFilePaths.forEach((v, i) => {
            uni.uploadFile({
              url: "https://up-z0.qiniup.com",
              filePath: tempFilePaths[i],
              name: "file",
              formData: {
                token: this.upToken,
              },
              success: (uploadFileRes) => {
                that.hou_imgs.push(
                  that.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key
                );
                if (that.hou_imgs.length >= 5) {
                  that.hou_imgs.length = 5;
                }
                uni.showToast({
                  title: "上传成功",
                  duration: 1500,
                  icon: "none",
                });
              },
            });
          });
        },
      });
    },
    imgsDa(index) {
      //点击放大
      uni.previewImage({
        urls: this.imgs,
        current: index,
        loop: true,
      });
    },
    imgsShan(index) {
      //点击删除
      uni.showModal({
        title: "提示",
        content: "确定删除此张照片吗？",
        success: (res) => {
          if (res.confirm) {
            this.imgs.splice(index, 1);
            this.hou_imgs.splice(index, 1);
            // console.log( this.imgs)4
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 40rpx;
  padding-top: 92rpx;
  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }

  .xian_ {
    height: 15rpx;
    width: 750rpx;
    background: #f8f8f8;
  }
  .area {
    padding: 32rpx 25rpx;
    box-sizing: border-box;
    .one_ {
      .title_ {
        font-size: 26rpx;
        font-weight: 600;
        color: #2a2a2a;
      }
      .cont {
        margin-top: 31rpx;
        display: flex;
        align-items: center;
        .left_ {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          align-items: center;
          margin-right: 20rpx;
          flex-shrink: 0;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .right_ {
          display: flex;
          flex-direction: column;
          height: 88rpx;
          justify-content: space-between;
          .name {
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2a2a2a;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          .comm {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
    .two_ {
      margin-top: 49rpx;
      .title_ {
        font-size: 26rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2a2a2a;
      }
      .comm {
        width: 700rpx;
        height: 235rpx;
        background: #f8f8f8;
        margin-top: 31rpx;
        padding: 24rpx 17rpx;
        box-sizing: border-box;
        .top_ {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2a2a2a;
        }
        .bottom_ {
          margin-top: 18rpx;
          display: flex;
          align-items: center;
          .left_ {
            width: 130rpx;
            height: 130rpx;
            background: #d8d8d8;
            border-radius: 8rpx;
            overflow: hidden;
            margin-right: 24rpx;
            flex-shrink: 0;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .right_ {
            height: 100rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .top {
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2a2a2a;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .bottom {
              font-size: 30rpx;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #2a2a2a;

              text {
                display: inline-block;
                margin-left: 16rpx;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #2a2a2a;
              }
            }
          }
        }
      }
    }
    .three_ {
      margin-top: 30rpx;
      .title_ {
        font-size: 26rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2a2a2a;
      }
      > textarea {
        margin-top: 27rpx;
        width: 700rpx;
        height: 200rpx;
        background: #f8f8f8;
        padding: 27rpx 20rpx;
        box-sizing: border-box;
      }
    }
    .four_ {
      margin-top: 30rpx;
      .title_ {
        font-size: 26rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2a2a2a;
      }
      .imgs_ {
        display: flex;
        margin-top: 40rpx;
        flex-wrap: wrap;
        .img_item {
          width: 150rpx;
          height: 150rpx;
          margin-top: 15rpx;
          margin-right: 18rpx;
          position: relative;
          image {
            width: 100%;
            height: 100%;
          }
          .tousu {
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            position: absolute;
            top: -10rpx;
            right: -10rpx;
          }
          &:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
    }

    .five_ {
      margin-top: 35rpx;
      .title_ {
        font-size: 26rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2a2a2a;
      }
      .content {
        margin-top: 30rpx;
        .name_,
        .phone_ {
          width: 700rpx;
          height: 88rpx;
          background: #f8f8f8;
          padding-left: 23rpx;
          box-sizing: border-box;
          input {
            width: 100%;
            height: 100%;
          }
        }
        .phone_ {
          margin-top: 16rpx;
        }
      }
    }
    .footer_btn {
      width: 700rpx;
      height: 98rpx;
      background: #3165ec;
      border-radius: 49rpx;
      line-height: 98rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin: 0 auto;
      margin-top: 54rpx;
    }
  }
}
</style>
